<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Ejercicio 1</title>
<link rel="stylesheet" href="./css/estilos.css" /> 

<!--
  jQuery library
-->
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<!--
  jCarousel library
-->
<script type="text/javascript" src="js/jquery.jcarousel.min.js"></script>
<!--
  jCarousel skin stylesheet
-->
<link rel="stylesheet" type="text/css" href="css/skin.css" />

<script type="text/javascript">

jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
    	wrap: 'circular',
		scroll: 1,
		animation: "slow",
		auto: 5
    });
});

</script>
</head>
<body>
	<div class="main-container">
		<div class="con-header">
			<h1 class="mod-logo">
			Logo
			</h1>
			<ul class="mod-menu">
				<li> <a href="">Buscador Avanzado</a> </li>
				<li> <a href="">Busqueda Guiada</a> </li>
				<li> <a href="">Ingresar</a> </li>
			</ul>
		</div>	
		<div class="con-neck">
			<div class="mod-carrusel">
				<ul id="mycarousel" class="jcarousel-skin-tango">
					<li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg"  alt="" /></li>
					<li><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg"  alt="" /></li>
					<li><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg"  alt="" /></li>
				</ul>

			</div> 
			<div class="mod-newstick">
				News Ticker
			</div>  
		</div> 
		<div class="con-body">
			<div class="mod-columnas-3">
				<h2 class="mod-titulo-3">Titulo 1</h2>
				<ul class="mod-lista-1">
					<li><a href=""><img src="http://placehold.it/120x120&amp;text=Logo_1" /></a></li>
					<li><a href=""><img src="http://placehold.it/120x120&amp;text=Logo_2" /></a></li>
				</ul>				
				<ul class="mod-lista-2">
					<li>Empresa1</li>
					<li>Empresa2</li>
					<li>Empresa3</li>
				</ul>
			</div>			
			<div class="mod-columnas-3">
				<h2 class="mod-titulo-3">Titulo 2</h2>
					<p>
					<img src="http://placehold.it/120x120&amp;text=Logo%203" class="logo3" />			
					Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. 
					</p>
				<ul class="mod-lista-2">
					<li>Propiedad1</li>
					<li>Propiedad2</li>
					<li>Propiedad3</li>					
					<li>Propiedad4</li>
				</ul>
			</div>
			<div class="mod-columnas-3">
				<h2 class="mod-titulo-3">Titulo 3</h2>
				<ul class="mod-lista-4">
					<li><img src="http://placehold.it/40x40" class="logo3" />Mencion1</li>
					<li><img src="http://placehold.it/40x40" class="logo3" />Mencion2</li>
					<li><img src="http://placehold.it/40x40" class="logo3" />Mencion3</li>
					<li><img src="http://placehold.it/40x40" class="logo3" />Mencion4</li>
				</ul>
			</div>
		</div> 
		<div class="con-footer">
			<p class="mod-copy">
				Copy
			</p> 
			<ul class="mod-social">
				<li> <a href="">TW</a> </li>
				<li> <a href="">FB</a> </li>
			</ul>  
		</div> 
	</div>


</body>

</html>
